<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="img/1.jpg" sizes="32x32" type="image/jpg">
  <link rel="icon" href="img/1.jpg" sizes="16x16" type="image/jpg">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
  <title>天科超市管理系统</title>
  <style>
    body {
      background-image: url("img/12.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .login-form-container {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); /* 针对 Safari */
      background-color: rgba(255, 255, 255, 0.5);
      padding: 3rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body class="min-vh-100  p-2 bg-body-tertiary d-flex flex-column align-items-center justify-content-center">

<div class="login-form-container">
  <h2 class="text-center">天科超市管理系统</h2>
  <p class="text-secondary text-center">天科超市</p>



  <!-- 修改表单标题和输入字段 -->
  <form id="form" class="form" style="width: 380px;max-width: 100%">
    <div class="mb-3">
      <div class="input-group">
        <span class="input-group-text bg-white "><i class="bi bi-person"></i></span>
        <input type="text" class="form-control" placeholder="请输入用户名" name="username"
               id="username" aria-label="username">
      </div>
    </div>

    <div class="mb-3">
      <div class="input-group bsa-show_hide_password">
        <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
        <input type="password" class="form-control" placeholder="请输入密码"
               name="userpwd"
               autocomplete="off"
               id="password" aria-label="password">
        <span class="input-group-text bg-white bsa-cursor-pointer"><i class="bi bi-eye-slash"></i></span>
      </div>
    </div>

    <div class="mb-3">
      <div class="input-group bsa-show_hide_password">
        <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
        <input type="password" class="form-control" placeholder="请再次输入密码"
               name="reuserpwd"
               autocomplete="off"
               id="repassword" aria-label="password">
        <span class="input-group-text bg-white bsa-cursor-pointer"><i class="bi bi-eye-slash"></i></span>
      </div>
    </div>

    <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap gap-3 text-center">
      <div class="flex-grow-1"><a href="/" class="link-success text-decoration-none">已有账号?</a></div>
<!--      <a href="/" class="link-success text-decoration-none">已有账号?</a>-->
    </div>

    <div class="d-grid gap-2">
      <button class="btn btn-outline-success" type="submit"><i class="bi bi-box-arrow-in-right"></i>注册</button>
    </div>
  </form>
</div>

<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/formvalidation/js/formValidation.js"></script>
<script src="lib/formvalidation/js/framework/bootstrap.js"></script>
<script src="lib/formvalidation/js/language/zh_CN.js"></script>
<script src="dist/js/bootstrap-admin.min.js"></script>
<script src="dist/js/app.js"></script>

<script>
  $(function () {

    // 定义自定义验证器函数
    FormValidation.Validator.passwordMatch = {
      validate: function (validator, $field, value) {
        var password1 = $('#password').val();
        var password2 = $('#repassword').val();

        if (password1 !== password2) {
          return {
            valid: false,
            message: '两次输入的密码不一致'
          };
        }

        return {
          valid: true,
          message: '密码匹配'
        };
      }
    };

    // 前端表单验证
    $('#form').formValidation({
      fields: {
        username: {
          validators: {
            notEmpty: true,
          }
        },
        password1: {
          validators: {
            notEmpty: true,
          }
        },
        password2: {
          validators: {
            notEmpty: true,
            passwordMatch: {}
          }
        }
      }
    }).on('success.form.fv', function (e) {
      // 阻止表单提交
      e.preventDefault();

      // 得到表单对象
      let $form = $(e.target);
      // 获取数据
      let data = $form.serialize();

      // 发起ajax请求
      $.ajax({
        method: 'post',
        url: '/api/register',
        // 表单数据
        data: data,
      }).then(response => {
        console.log(response)
        if (response === 1) {
          $.toasts({
            type: 'success',
            content: '注册成功',
            onHidden: function () {
              top.location.replace('/main');
            }
          })
        } else {
          $.toasts({
            type: 'error',
            content: '注册失败,请检查用户名和密码',
            onHidden: function () {
              top.location.replace('/register');
            }
          })
        }
      });
    });

  })

</script>
</script>

</body>
</html>